<template>
  <div>
    <el-divider class="el-divider-specail" content-position="left"
      ><span>{{ dataList.EquipInfo }}</span>
    </el-divider>
    <el-table
      :data="list"
      element-loading-text="Loading"
      fit
      highlight-current-row
      height="130px"
    >
      >
      <el-table-column :label="dataList.DeviceNumber">
        <template slot-scope="scope">
          {{ scope.row.num }}
        </template>
      </el-table-column>
      <el-table-column
        :label="
          $i18n.locale === 'en' ? dataList.DeviceEName : dataList.DeviceName
        "
      >
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column :label="dataList.DeviceSpecifications">
        <template slot-scope="scope">
          {{ scope.row.specifications }}
        </template>
      </el-table-column>
      <el-table-column :label="dataList.DeviceFactoryNum">
        <template slot-scope="scope">
          {{ scope.row.factoryNum }}
        </template>
      </el-table-column>
      <el-table-column :label="dataList.DeviceStatus">
        <template slot-scope="scope">
          {{ scope.row.statusName }}
        </template>
      </el-table-column>
      <el-table-column
        :label="
          $i18n.locale === 'en'
            ? dataList.eDeviceStorageAddress
            : dataList.DeviceStorageAddress
        "
      >
        <template slot-scope="scope">
          {{ scope.row.storageAddress }}
        </template>
      </el-table-column>
      <el-table-column :label="dataList.DevicePersonResponsibleId">
        <template slot-scope="scope">
          {{ scope.row.personResponsibleName }}
        </template>
      </el-table-column>
    </el-table>
    <el-divider class="el-divider-specail" content-position="left"
      ><span>{{ dataList.CalibMethod }}</span>
    </el-divider>
    <el-table
      :data="listDeviceVerification"
      element-loading-text="Loading"
      fit
      highlight-current-row
      height="150px"
    >
      >
      <el-table-column :label="dataList.CalibrationObject">
        <template slot-scope="scope">
          {{ scope.row.verificationObject }}
        </template>
      </el-table-column>
      <el-table-column :label="dataList.CalibrationWay">
        <template slot-scope="scope">
          {{ scope.row.verificationWay }}
        </template>
      </el-table-column>
    </el-table>
    <el-divider class="el-divider-specail" content-position="left"
      ><span>{{ dataList.CalibRecords }}</span>
    </el-divider>
    <el-descriptions class="margin-top" :column="1" border>
      <el-descriptions-item
        :label="dataList.CalibrationPersonName"
        :label-style="{ width: '150px' }"
      >
        {{ formData.calibrationPersonName }}
      </el-descriptions-item>
      <el-descriptions-item :label="dataList.CalibTime">
        {{ formatTime(formData.calibrationDate) }}
      </el-descriptions-item>
      <el-descriptions-item :label="dataList.CertiNumber">
        {{ formData.certificateNo }}
      </el-descriptions-item>
      <el-descriptions-item :label="dataList.CalibFacility">
        {{ formData.company }}
      </el-descriptions-item>
    </el-descriptions>
    <el-divider class="el-divider-specail" content-position="left"
      ><span>{{ dataList.ReportCertiCheck }}</span>
    </el-divider>
    <div style="width: 100%">
      <el-table
        :data="reportCertificateTable"
        element-loading-text="Loading"
        fit
        highlight-current-row
      >
        <el-table-column :label="dataList.InspectionItem">
          <template slot-scope="scope">
            {{ scope.row.detectionItem }}
          </template>
        </el-table-column>
        <el-table-column :label="dataList.Content">
          <template slot-scope="scope">
            <span>{{ scope.row.content }}</span>
          </template>
        </el-table-column>
        <el-table-column :label="dataList.InspectionResult">
          <template slot-scope="scope">
            {{ scope.row.result == 1 ? dataList.Correct : dataList.Deny }}
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-divider class="el-divider-specail" content-position="left"
      ><span>{{ dataList.CalibResult }}</span>
    </el-divider>

    <el-descriptions class="margin-top" :column="1" border>
      <el-descriptions-item
        :label="dataList.CalibMethodAndResult"
        :label-style="{ width: '150px' }"
      >
        <div>
          <TinyEditor v-model="formData.content"></TinyEditor>
        </div>
      </el-descriptions-item>
      <el-descriptions-item :label="dataList.DeviceImg">
        <div style="display: flex; flex-direction: row">
          <div
            v-for="(item, index) in formData.sysBusinessImgWarehouseList"
            :key="index"
            style="
              margin-left: 10px;
              display: flex;
              flex-direction: column;
              justify-content: center;
            "
          >
            <el-image
              :src="item.fileBase"
              :preview-src-list="[item.fileBase]"
              style="width: 100px; height: 70px"
            ></el-image>
          </div>
        </div>
      </el-descriptions-item>
      <el-descriptions-item :label="dataList.DeviceAnnex">
        <el-table
          :data="formData.sysBusinessFileWarehouseList"
          style="width: 100%"
        >
          <el-table-column :label="dataList.Number" type="index" width="50">
          </el-table-column>
          <el-table-column
            prop="originalFileName"
            :label="dataList.DeviceoriginalFileName"
          >
          </el-table-column>
          <el-table-column prop="name" :label="dataList.Operation">
            <template slot-scope="scope">
              <el-link type="primary" @click="download(scope.row)">{{
                btn.Download
              }}</el-link>
            </template>
          </el-table-column>
        </el-table>
      </el-descriptions-item>
      <el-descriptions-item :label="dataList.Conclusion">
        {{ formData.conclusionName }}
      </el-descriptions-item>
      <el-descriptions-item :label="dataList.ConclusionReason">
        {{ formData.conclusionReason }}
      </el-descriptions-item>
      <el-descriptions-item :label="dataList.EquipStatusAfterCalib">
        {{ formData.deviceStatusName }}
      </el-descriptions-item>
      <el-descriptions-item :label="dataList.NextCalibTime">
        {{ formatTime(formData.calibrationDateNext) }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script>
import { get } from "../../../api/DeviceCalibrationTask";
import { mapGetters } from "vuex";
import { normal, reportCertificateTable } from "../../../utils/const";
import { formatTime } from "../../../utils/time";
// import { getBlob, saveAs } from "../../../utils/tool"
import TinyEditor from "../../../components/TinyEditor.vue";
import { GetStaticFileInfo, GetStaticImgInfo } from "@/api/Base";
export default {
  name: "DeviceCalibrationTaskView",
  components: { TinyEditor },
  props: {
    id: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      normal: normal,
      styleCSS: "text-align:left",
      verificationObjectList: [],
      returnObjct: true,
      choiceDeviceVisible: false,
      reportCertificateTable: reportCertificateTable,
      list: [],
      listDeviceVerification: [],
      loading: false,
      formData: {
        id: 0,
        calibrationPersonId: this.$store.getters.currentUserId,
        calibrationPersonName: this.$store.getters.name,
        calibrationDate: new Date(),
        certificateNo: "",
        company: "",
        content: "",
        imgArray: [],
        fileArray: [],
        sysBusinessImgWarehouseList: [],
        sysBusinessFileWarehouseList: [],
        conclusion: 10,
        calibrationDateNext: null,
        deviceStatus: normal,

        num: "",
        deviceNum: "",
        calibrationPlanNum: "",
        type: 0,
        typeName: "",
        verificationObject: "",
        verificationWay: "",
        planDate: 0,
        status: 0,
        statusName: "",
        remark: "",
        conclusionName: "",
        conclusionReason: "",
        deviceStatusName: "正常",
        projectResultInfo: 0,
        projectResultInfoName: "",
        projectResultRang: 0,
        projectResultRangName: "",
        projectResultSure: 0,
        projectResultSureName: "",
        projectResultPrecise: 0,
        projectResultPreciseName: "",
        projectResultCover: 0,
        projectResultCoverName: "",
        deviceId: 0,
      },
    };
  },
  computed: {
    ...mapGetters(["fileDomain", "fileBucket"]),
    btn() {
      return this.$t("ModuleDevice.buttons");
    },
    dataList() {
      return this.$t("ModuleDevice.Device");
    },
  },
  created() {
    this.init();
  },
  methods: {
    formatTime,
    init() {
      get({ id: this.id }).then((res) => {
        this.formData.fileArray = [];
        res.data.sysBusinessFileWarehouseList.map((item) => {
          var obj = item;
          obj.name = item.originalFileName;
          // obj.url = `${this.$baseProtocol}//${this.fileDomain}/${this.fileBucket}/${item.filePath}`;
          obj.url = `${item.filePath}`;
          this.formData.fileArray.push(obj);
        });
        this.formData.imgArray = [];
        res.data.sysBusinessImgWarehouseList.map((item) => {
          var obj = item;
          obj.name = item.originalFileName;
          // obj.url = `${this.$baseProtocol}//${this.fileDomain}/${this.fileBucket}/${item.filePath}`;
          obj.url = `${item.filePath}`;
          obj.imgUrl = item.filePath;
          this.formData.imgArray.push(obj);
        });

        this.reportCertificateTable[0].result = res.data.projectResultInfo;
        this.reportCertificateTable[0].content = res.data.projectResultInfoName;

        this.reportCertificateTable[1].result = res.data.projectResultRang;
        this.reportCertificateTable[1].content = res.data.projectResultRangName;

        this.reportCertificateTable[2].result = res.data.projectResultSure;
        this.reportCertificateTable[2].content = res.data.projectResultSureName;

        this.reportCertificateTable[3].result = res.data.projectResultPrecise;
        this.reportCertificateTable[3].content =
          res.data.projectResultPreciseName;

        this.reportCertificateTable[4].result = res.data.projectResultCover;
        this.reportCertificateTable[4].content =
          res.data.projectResultCoverName;

        this.formData = res.data;
        if (res.data.conclusion === 0) {
          this.formData.conclusion = 10;
        }
        if (res.data.deviceStatus === 0) {
          this.formData.deviceStatus = this.normal;
          this.formData.deviceStatusName = this.dataList.Normal;
        }
        this.formData.deviceStatus = String(res.data.deviceStatus);
        this.list = res.data.deviceDtos;
        this.listDeviceVerification = [];
        this.listDeviceVerification.push({
          verificationWay: res.data.verificationWay,
          verificationObject: res.data.verificationObject,
        });

        for (
          let i = 0;
          i < this.formData.sysBusinessImgWarehouseList.length;
          i++
        ) {
          GetStaticImgInfo(
            this.formData.sysBusinessImgWarehouseList[i].filePath
          ).then((res) => {
            this.formData.sysBusinessImgWarehouseList[i].fileBase = res.data;
            this.$forceUpdate();
          });
        }
      });
    },
    getUrl(url) {
      // var res = `${this.$baseProtocol}//${this.fileDomain}/${this.fileBucket}/${url}`;
      var res = `${url}`;
      return res;
    },
    download(row) {
      // var fileUrl = `${this.$baseProtocol}//${this.fileDomain}/${this.fileBucket}/${row.filePath}`;
      var fileUrl = `${row.filePath}`;
      GetStaticFileInfo(fileUrl);
      // getBlob(fileUrl).then((blob) => {
      //   saveAs(blob, row.originalFileName);
      // });
    },
  },
};
</script>
<style scoped lang="scss">
.deviceAddDialogFile {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  height: 150px;
  ::v-deep.base-upload {
    text-align: left;
    display: flex;
    flex-direction: column;
    padding-top: 10px;
    width: 100%;
  }
  ::v-deep .el-upload-list__item {
    width: 50%;
  }
  ::v-deep .el-upload {
    text-align: left;
  }
  ::v-deep .el-upload-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    overflow-y: auto;
  }
  ::v-deep .el-upload__tip {
    color: red;
  }
}
.deviceAddDialogImg {
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  height: 150px;
  ::v-deep .el-upload--picture-card {
    width: 116px;
    height: 88px;
    border: 1px solid #dcdfe6;
  }
  ::v-deep .el-upload-list__item {
    width: 116px;
    height: 88px;
    border: 1px solid #dcdfe6;
  }
  ::v-deep.el-upload {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  ::v-deep .tip-text {
    color: red !important;
    font-size: 12px;
  }
  ::v-deep .el-upload-list--picture-card {
    margin-left: 10px;
  }

  ::v-deep .base-upload {
    display: flex;
    flex-direction: row-reverse;
    margin-top: 10px;
  }
}
</style>
